<template>
	<div style='height:100%;' ref='container'>
		<v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
		<loading v-else></loading>
	</div>
</template>

<script>
	import { Request } from '@/utils'
	export default {
		name : 'device-pie-chart',

		props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
				show : false
			}
		},
		
		computed : {
			options () {
                var W = this.$refs.container.clientHeight * 0.6 / 2
				var data = this.value
				
				var colorList = ['#6042ff', '#65cd17', '#1ba2ff', '#f15259']

				var options =  {
					grid : {
						top : '20px',
						right : '0px',
						bottom : '20px',
						left : '0px'
					},
                    color : colorList,
					series : {
						type : 'pie',
						silent : true,
						center : ['50%', '50%'],
						radius : [W * 0.80, W],
						minShowLabelAngle : 0,
						startAngle : 0,
						minAngle : 60,
						//roseType : true,
						labelLine: {
							normal: {
								show: true,
								length: 20,
                                length2: 20,
                                lineStyle : {
                                    color : '#5a616e',
                                }
							}
						},
						label : {
							show : true,
                            align : 'center',
                            color : '#ffffff',
                            rich : {name : {fontSize : 16, color : '#fff', align: 'center',}, margin : {height : 4, width : '100%'},hr : {height : 1, width : '100%', backgroundColor : '#5a616e'}, itemStyle : {color : '#5a616e'}},
							formatter : '{d}% {b}\n{margin|}\n{hr|}\n{margin|}\n{name|{c}}'
						},
						data   : data
					}
				}

				return options
			}
		}
	}
</script>